import TableList from '@/components/TableList';
import { useEffect, useState } from "react";
import { message } from "antd";
import { portMappingConnectBan, portMappingConnectKill, portMappingConnectList } from "../service";
import { useRef } from "react";
import TOButton from "@/components/TableList/TOButton";
import TableOperations from "@/components/TableList/TableOperations";

const PortMappingConnectListMgr = ({ portMappingInfo }) => {
  const tableRef = useRef();
  const [selectRecord, setSelectRecord] = useState(null);

  const columns = [
    {
      title: '序号',
      align: 'center',
      dataIndex: 'index',
      valueType: 'indexBorder',
      width: 50,
    },
    {
      title: 'ID',
      dataIndex: 'id',
      width: 100,
      hideInSearch: true,
      hidden: true
    },
    {
      title: 'Ip',
      dataIndex: 'sourceIp',
      width: 150,
    },
    {
      title: 'Port',
      dataIndex: 'sourcePort',
      width: 80,
    },
    {
      title: '连接时间',
      dataIndex: 'connectTime',
      // width: 200,
      hideInSearch: true,
    },
    {
      title: '接收字节(KB)',
      dataIndex: 'recByteNumber',
      width: 110,
      hideInSearch: true,
    },
    {
      title: '发送字节(KB)',
      dataIndex: 'sendByteNumber',
      width: 110,
      hideInSearch: true,
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      align: 'center',
      fixed: 'right',
      width: 150,
      search: false,
      render: (_, record) => {
        const operations = [];

        operations.push(<TOButton
          key='edit'
          type='primary'
          text='断开'
          onClick={() => {
            portMappingConnectKill({id:record.id}).then((res) => {
              message.success("操作成功")
              tableRef.current.reloadAndRest();
            })
          }}
        />)
        operations.push(<TOButton
          key='edit'
          type='primary'
          text='加入黑名单'
          onClick={() => {
            portMappingConnectBan({portMappingId: portMappingInfo.id, id:record.id}).then((res) => {
              message.success("操作成功")
              tableRef.current.reloadAndRest();
            })
          }}
        />)
        return <TableOperations operations={operations} />;
      }
    }
  ];
  const addCallback = () => {
    if (selectRecord) setSelectRecord(null)
  };
  return (
    <div>
      <TableList
        tableRef={tableRef}
        columns={columns}
        keyName="id"
        labelWidth={95}
        extraSearchValue={{ id: portMappingInfo.id }}
        tableRequest={portMappingConnectList}
        toolBarLeftArea="连接列表"
      />
    </div>
  );

}

export default PortMappingConnectListMgr;